<template>
	<transition name="goods-details-page">
		<div id="goods-details-page" v-show="show_page">
			<transition name="goods-details-container">
				<div class="container" v-show="show_page">
					<div class="goods-details-page-header">
						<b-icon-x class="close-btn" @click="close" />
					</div>
					<div class="goods-details-page-content" v-if="!loading && goods != null">
						<div class="goods-details-item-image">
							<img :src="goods.image + '!300'" />
						</div>
						<div class="goods-details-item-name">
							{{ goods.name }}
						</div>
						<div class="goods-details-item-info">
							<div class="goods-details-item-price">
								<small>￥</small> {{ goods.price }}
							</div>
							<div class="goods-details-item-add-btn">
								<b-button class="button" size="sm" variant="primary" @click="add_cart">
									<b-spinner v-if="processing" small label="EditAddress"></b-spinner>
									<div v-else>
										加入购物车
									</div>
								</b-button>
							</div>
						</div>
						<div class="goods-details-number">
							<div class="number-title">
								购买数量
							</div>
							<div class="number-button">
								<b-form-spinbutton class="number-button-btn" size="sm" v-model="number" />
							</div>
						</div>
						<div class="goods-details-spec">
							<div class="goods-details-item-spec" v-for="(spec, index) in goods.spec" :key="index">
								<p class="goods-details-item-spec-name">{{ spec.name }}</p>
								<div>
									<div :class="'goods-details-item-btn ' + (item.checked ? 'goods-details-item-btn-active' : '')" v-for="(item, item_index) in spec.item" :key="item_index" @click="change_item(index, item_index)">
										{{ item.name }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</transition>
		</div>
	</transition>
</template>

<script>
	import {BIcon, BIconX } from 'bootstrap-vue'
	import layer from 'layui-layer'
	
	export default {
		inject: [
			'reload_view'
		],
		components: {
			BIcon,
			BIconX
		},
		data() {
			return {
				show_page: false,
				display: false,
				loading: false,
				goods: null,
				number: 1,
				processing: false
			};
		},
		props: {
			show: false,
			id: null
		},
		methods: {
			page_display() {
				this.display = !this.display
			},
			close() {
				this.$emit('update:show', false)
			},
			fetch_goods(id) {
				this.loading = !this.loading
				this.$axios.get('/goods/goods_item', {params: {id: id}}).then(resp => {
					if(resp.ret == 0) this.goods = resp.data
					
					
					if(this.goods != null) {
						this.goods.spec.forEach(item => {
							item.item[0].checked = true
						})
					}
					this.loading = !this.loading
				})
			},
			change_item(spec_index, index) {
				this.goods.spec[spec_index].item.forEach(item => {
					item.checked = false
				})
				
				this.goods.spec[spec_index].item[index].checked = true
				
				this.$forceUpdate()
			},
			add_cart() {
				if(this.goods != null){
					if(!this.processing) {
						this.processing = !this.processing
						
						let spec_list = {}
						this.goods.spec.forEach(spec => {
							spec.item.forEach(item => {
								if(item.checked) {
									spec_list[String(spec.id)] = item.item_id
									return
								}
							})
						})
						
						this.$axios.post('/cart/add', {gid: this.goods.id, spec: spec_list, number: this.number}).then(resp => {
							if(resp.ret == 0) {
								this.$msg("添加成功")
								this.close()
							} else if(resp.ret == 1001) this.$msg('请先登录')
							
							this.processing = !this.processing
						})
					}
				}
			}
		},
		mounted() {
			this.show_page = this.show
		},
		watch: {
			show(newVal, oldVal){
				this.show_page = newVal
				this.display = this.show
			},
			id(val) {
				if(val != null) this.fetch_goods(val)
			}
		}
	}
</script>

<style>
	#goods-details-page {
		z-index: 2147483647;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100%;
		background-color: rgba(0, 0, 0, .7);
	}
	#goods-details-page .container {
		margin-top: 3vh;
		padding: 10px;
		height: 97vh;
		background-color: #fff;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}
	
	.goods-details-page-enter-active, .goods-details-page-leave-active {
		transition: all .3s ease;
	}
	.goods-details-page-enter-active {
		opacity: 1;
	}
	.goods-details-page-leave-to {
		opacity: 0;
	}
	
	.goods-details-container-enter-active, .goods-details-container-leave-active {
		transition: all .2s ease;
	}
	.goods-details-container-enter, .goods-details-container-leave-to {
		transform: translateY(6.25rem);
		opacity: 0;
	}
	
	.close-btn {
		float: left;
		font-size: 1.5625rem;
	}
	
	.goods-details-page-header {
		height: 20px;
		margin: 0.3125rem auto;
	}
	.goods-details-page-content {
		padding-top: 1.25rem;
	}
	
	.goods-details-item-image{
		text-align: center;
		width: 100%;
		margin-bottom: 0.625rem;
	}
	.goods-details-item-image img {
		width: 18.75rem;
		height: 18.75rem;
	}
	
	.goods-details-item-name {
		font-size: 1.5625rem;
	}
	.goods-details-item-info {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.goods-details-item-price {
		width: calc(100% - 6.25rem);
		font-size: 1.875rem;
		color: rgb(255, 78, 47)
	}
	.goods-details-item-add-btn {
		width: 6.25rem;
		text-align: center;
		padding: 0 auto;
	}
	.goods-details-item-add-btn > .button {
		width: 5.9375rem;
	}
	.goods-details-item-add-btn > .number-button {
		margin-bottom: 0.3125rem;
	}
	
	.goods-details-spec {
		margin-top: 0.9375rem;
	}
	.goods-details-item-spec-name {
		font-size: 1.125rem;
		color: #666;
		margin-left: 0.039062rem;
	}
	.goods-details-item-btn {
		display: inline-block;
		margin: 0 0.625rem;
		padding: 0.3125rem 0.625rem;
		border: 0.0625rem solid #aaa;
		border-radius: 0.625rem;
		color: #999;
		user-select: none;
		cursor: pointer;
	}
	.goods-details-item-btn-active {
		color: #0080FF;
		border-color: #0080FF;
	}
	.goods-details-number {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 0.9375rem;
		font-size: 1.125rem;
		color: #666;
	}
	.goods-details-number .number-title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: calc(100% - 9.375rem);
		height: 2.5rem;
	}
	.goods-details-number .number-button {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 2.5rem;
		width: 9.375rem;
	}
	.goods-details-number .number-button .number-button-btn {
		width: 9.375rem;
	}
</style>
